<template>
    <div class="wrapper invite">
        <mt-header title="邀请好友" mtClass="no-bg-fff" rightIcon="icon-tubiao212" @rightEvent="rightEvent"/>
        <div class="shareImg" ref="capture">
            <img src="static/share_bg.png" crossorigin="anonymous">
            <img src="static/share_title.png" class="title" crossorigin="anonymous">
            <img src="static/share_k.png" class="kbg" crossorigin="anonymous">
            <div class="inner">
                <img v-if="userInfo.photo" :src="userInfo.photo || 'static/default-headImg.png'" class="headImg" crossorigin="anonymous">
                <img v-else src="static/default-headImg.png" class="headImg" crossorigin="anonymous">
                <div class="name">{{userInfo.name}}</div>
                <div>邀您注册Reading Box</div>
                <div class="codeImg"><div ref="qrcode1"></div></div>
                <div>邀请码：{{userInfo.qrCode}}</div>
                <div class="text"><strong>{{msg}}</strong></div>
            </div>
        </div>
        <div class="content">
            <div class="bg">
                <img src="static/share_bg.png" crossorigin="anonymous">
            </div>
            <div class="h1">
                <div>邀请好友赢RB</div>
                <div class="subtitle">双赢奖励 你我共享</div>
            </div>
            <div class="tab">
                <mt-navbar v-model="selected">
                    <mt-tab-item id="1">我的邀请</mt-tab-item>
                    <mt-tab-item id="2">邀请记录</mt-tab-item>
                </mt-navbar>
                <mt-tab-container v-model="selected">
                    <mt-tab-container-item id="1">
                        <div class="inner">
                            <div class="title">您的邀请码为</div>
                            <div class="qrCode">{{userInfo.qrCode}}</div>
                            <div class="btn" @click="copyEvent"><span>复制我的邀请码</span></div>
                            <div class="codeImg"><div ref="qrcode"></div></div>
                            <div class="input">
                                <input type="text" v-model="msg" ref="gain1" @focus="getFocus" @blur="getBlur">
                                <img src="../../assets/bi.png" @click="getFocus">
                            </div>
                        </div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="2">
                        <div class="inner lists" v-if="list.length>0">
                            <div class="thead">
                                <span>会员 {{gradeCount}} 人</span> / <span>累计邀请 {{invitationCount}} 人</span>
                            </div>
                            <div class="item" v-for="(item,index) in list" :key="index">
                                <div class="name">
                                    <img slot="icon" :src="item.photo || 'static/default-headImg.png'">
                                    <span>{{item.name}}</span>
                                </div>
                                <div class="level">{{item.gradeValue}}</div>
                                <div class="reward">{{item.buyGradeGetDlb!='0'?`+${item.buyGradeGetDlb}`:'—'}}</div>
                            </div>
                        </div>
                        <div class="inner nolist" v-else>
                            <div class="no">
                                <img src="static/no.png">
                                <div>还没有任何用户被您邀请</div>
                            </div>
                        </div>
                    </mt-tab-container-item>
                </mt-tab-container>
            </div>
            <div class="yq-btn" v-show="selected=='1'" @click="saveImg"><span>现在去邀请</span></div>
            <!-- <div class="ruler" @click="isShowRuler=true">
                <span>活动<br/>规则</span>
                <i slot="icon" class="icon iconfont icon-jiantou-xia"></i>
            </div> -->
        </div>
        <div class="rulerBox" v-show="isShowRuler">
            <div class="inner">
                <div class="title">邀请好友奖励规则</div>
                <ul class="text">
                    <li>1）用户可分享专属邀请码或链接邀请好友注册。</li>
                    <li>2）普通读者最多邀请50位好友，金牌读者最多邀请100位好友，超级读者最多邀请200位好友。</li>
                    <li>3）邀请人可以获得邀请奖励的RB，被邀请人可以获得注册奖励的RB。</li>
                    <li>4）在本次活动期间，如用户存在违规行为行为（如恶意注册，机器作弊等），Reading Box将取消用户奖励领取资格。</li>
                    <li>本活动最终解释权归数链基地所有。</li>
                </ul>
                <div class="btn" @click="isShowRuler=false"><span>我知道了</span></div>
            </div>
        </div>
        <div class="loading" v-show="isLoading"><mt-spinner type="fading-circle" :size="50"></mt-spinner></div>
        <div class="imgbox" v-show="isShowImgBox" :class="{'show':isShowImgBox}">
            <div class="off" @click="isShowImgBox=false"><span>×</span></div>
            <img :src="dataURL">
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
import mtHeader from "@/components/Header"
import QRCode from 'qrcodejs2'
import Clipboard from 'clipboard';
import { Toast } from 'mint-ui';
import { GetInvitationList} from '@/api/api'
import { getSystemType, loadURL } from '@/utils'
export default {
    data() {
        return {
            userInfo:{},
            isShowRuler:false,
            isShowImgBox:false,
            selected: '1',
            msg: '传递优质资讯，阅读产生价值',
            dataURL: '',
            base64: '',
            list:[],
            realCount:'',
            invitationCount:'',
            isLoading: false,
            focus:false,
            isFlag:false
        }
    },
    components:{
        mtHeader
    },
    activated(){
        this.reset();
        this.init();
    },
    methods: {
        ...mapActions('user', [
            'get_userInfo_cache',
            'get_userInfo_data',
        ]),
        init(){
            // 用户信息的缓存？缓存 : 发送请求
            this.get_userInfo_cache()
            .then(res => {
                if (res) {
                    this.userInfo = res
                    if(!this.isFlag){
                        this.$nextTick(()=>{
                            this.qrcode()
                        })
                    }
                } else {
                    this.get_userInfo_data().then(res => {
                        this.userInfo = res
                        if(!this.isFlag){
                            this.$nextTick(()=>{
                                this.qrcode()
                            })
                        }
                    })
                }
            })
            GetInvitationList().then(res => {
                if( res.code == 200 ){
                    this.list = res.data.invitationRecordEntityList;
                    this.gradeCount = res.data.gradeCount;
                    this.invitationCount = res.data.invitationCount
                }
            })
        },
        reset(){
            this.msg = '传递优质资讯，阅读产生价值';
            this.isShowImgBox = false;
            this.dataURL = '';
        },
        callEvent(){
            if( getSystemType().type == 'android' ){
                window.javaObj.shareWeiChat(this.base64);
            }
            if( getSystemType().type == 'ios' ){
                window.webkit.messageHandlers.Share.postMessage({imgPath:this.base64});
            }
        },
        copyEvent(){
            var shareCode = this.userInfo.qrCode;
            var clipboard = new Clipboard('.btn', {
                text: function() {
                    return shareCode;
                }
            });
            clipboard.on('success', e => {
                // console.log('复制文本为：'+shareCode);
                Toast({
                    message: '复制成功',
                    iconClass: 'icon iconfont icon-ic_check'
                });
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                // 不支持复制
                Toast({
                    message: '不支持自动复制',
                    iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                });
                // 释放内存
                clipboard.destroy()
            })
        },
        qrcode(){
            this.isFlag = true
            let qrcode = new QRCode(this.$refs.qrcode,{
                width: 120, // 设置宽度，单位像素
                height: 120, // 设置高度，单位像素
                text: this.userInfo.qrCodePath
            })

            let qrcode1 = new QRCode(this.$refs.qrcode1,{
                width: 115, // 设置宽度，单位像素
                height: 115, // 设置高度，单位像素
                text: this.userInfo.qrCodePath
            })
        },
        saveImg(){
            if( !this.msg ){
                this.msg = '传递优质资讯，阅读产生价值';
            }
            if( this.msg.length > 20 ){
                Toast({
                    message: '建议20个文字以内',
                });
                return false;
            }
            this.isLoading = true;    //截图开始进行中
            // console.log(window.screen.availWidth,window.screen.availHeight);
            var scale = 2; 
            var shareContent = this.$refs.capture; 
            var width = window.screen.availWidth; 
            var height = width * 667 / 375; 
            var canvas = document.createElement("canvas"); 
            
            canvas.width = width * scale; 
            canvas.height = height * scale; 
            canvas.getContext("2d").scale(scale, scale); 

            html2canvas(shareContent, {
                width:width,
                height:height,
                scale: scale,
                canvas: canvas,
                async: true,
                backgroundColor: null,
                useCORS: true  //开启跨域配置
            }).then((canvas) => {
                this.dataURL = canvas.toDataURL();
                this.base64 = this.dataURL.split(',')[1];
                this.isShowImgBox = true;
                this.isLoading = false;
                this.callEvent();
            });
        },
        getFocus(){
            this.focus = true;
            this.$refs.gain1.focus()
        },
        getBlur(){
            this.focus = false;
        },
        rightEvent(){
            this.saveImg();
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    position:relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: -webkit-linear-gradient(left, #5408C7 , #2451BE); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #5408C7 , #2451BE); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #5408C7 , #2451BE); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #5408C7 , #2451BE); 
    .shareImg{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        .kbg{
            position:absolute;
            top:25%;
            left: 0;
            right: 0;
        }
        .title{
            width: 66%;
            position: absolute;
            top: 55px;
            left: 17%;
            right: 0;
        }
        .inner{
            text-align:center;
            font-size:16px;
            color:#333;
            position:absolute;
            top:20%;
            left: 0;
            right: 0;
            .headImg{
                width:60px;
                height:60px;
                margin:12% auto 0;
                border-radius: 50%;
            }
            .name{
                line-height:25px;
                margin-top:3%;
            }
            .codeImg{
                width:125px;
                height:125px;
                margin:10% auto 2%;
                padding:5px;
                border:1px solid #F4F5FA;
                background:#fff;
            }
            .text{
                margin-top:18%;
                position:relative;
                color:#FFC518;
                width: 90%;
                height:30px;
                margin-left: 5%;
                font-size:22px;
                strong{
                    width: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }
    .content{
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        .bg{
            height:100%;
            position:absolute;
            top:0;
            left:0;
            right:0;
        }
        .h1{
            font-size:34px;    
            font-family:FZY3JW--GB1-0;
            text-align:center;
            color:#fff;
            position: absolute;
            top: 10%;
            left: 14%;
            margin: 0 auto;
            width: 72%;
            .subtitle{
                font-size:14px;
                margin-top: 3%;
                &:before,&:after{
                    content: "";
                    width: 20px;
                    border-top: 1px #fff solid; 
                    display: inline-block;
                    vertical-align: middle;
                }
                &:before{
                margin-right: 10px;  
                }
                &:after{
                margin-left: 10px;  
                }
            }
        }
        .tab{
            height:60%;
            position: absolute;
            top: 26%;
            left: 27px;
            right: 27px;
            .mint-navbar{
                width:100%;
                height: 50px;
                background:linear-gradient(0deg,rgba(255,220,71,1),rgba(255,197,24,1));
                border-top-left-radius:5px;
                border-top-right-radius:5px;
                color:#333;
                .mint-tab-item{
                    &:first-child{
                        border-right: 1px solid rgba(255,231,156,1);
                    }
                    &.is-selected{
                        color: #fff;
                    }
                    .mint-tab-item-label{
                        font-size:17px;
                    }
                }
            }
            .mint-tab-container{
                height: 85%;
                background: #fff;
                border-bottom-left-radius:5px;
                border-bottom-right-radius:5px;
                .mint-tab-container-wrap{
                    height:100%;
                    .mint-tab-container-item{
                        &:first-child{
                            .inner{
                                background: #fff;
                                padding-bottom:1%;
                                text-align:center;
                                border-bottom-left-radius:5px;
                                border-bottom-right-radius:5px;
                                .title{
                                    color:#999;
                                    font-size:14px;
                                    padding-top:5%;
                                }
                                .qrCode{
                                    color:#FFD232;
                                    font-size:23px;
                                    font-weight:bold;
                                    margin-top:3%;
                                }
                                .btn{
                                    width:135px;
                                    height:24px;
                                    line-height: 24px;
                                    background:rgba(255,210,50,1);
                                    border-radius:12px;
                                    font-size:13px;
                                    color:#fff;
                                    margin:3% auto;
                                    position:relative;
                                    span{
                                        width: 100%;
                                        position:absolute;
                                        top:50%;
                                        left:50%;
                                        transform:translate(-50%,-50%);
                                    }
                                }
                                .codeImg{
                                    width:40%;
                                    padding:5px;
                                    margin: 0 auto;
                                    border: 1px solid #F4F5FA;
                                }
                                .input{
                                    max-width:280px;
                                    height:40px;
                                    margin:7% auto;
                                    position:relative;
                                    input{
                                        color: #777;
                                        font-weight: bold;
                                        font-size: 16px;
                                        width:96%;
                                        height:40px;
                                        padding:0 45px 0 15px;
                                        background: url(../../assets/kuang.png) no-repeat 0 0;
                                        background-size: 100% 100%;
                                    }
                                    img{
                                        width:25px;
                                        height:25px;
                                        position:absolute;
                                        top:8px;
                                        right:10px;
                                    }
                                    
                                }
                                .input-fixed{
                                    position:fixed;
                                    top:45%;
                                    left:0;
                                    right:0;
                                    bottom:0;
                                    background:#fff;
                                    z-index:2;
                                    border-top:1px solid #efefef;
                                    input{
                                        width:80%;
                                        height:30px;
                                        line-height:30px; 
                                        padding-left:10px;  
                                        border:1px solid #efefef;
                                        border-radius:20px;
                                        background:#efefef;
                                        color:#999;
                                        margin:8px 0;
                                        .custom {
                                            caret-color: #999;
                                        }
                                    }
                                    span{
                                        color:#999;
                                        margin-left:10px;
                                    }
                                }
                            }
                        }
                        &:last-child{
                            height: 100%;
                            background: #fff;
                            .inner{
                                width:100%;
                                height:100%;
                                padding: 0 20px;
                                border-bottom-left-radius:5px;
                                border-bottom-right-radius:5px;
                                &.lists{
                                    overflow:scroll;
                                    .item{
                                        display:flex;
                                        line-height:40px;
                                        padding:10px 0;
                                        border-top:1px solid #F4F5FA;
                                        color:#666;
                                        .name{
                                            flex:1;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                            img{
                                                display:inline-block;
                                                width:40px;
                                                height:40px;
                                                margin-right:5px;
                                                border-radius:50%;
                                                vertical-align:middle;
                                            }
                                            span{
                                                color:#666;
                                                font-size:13px;
                                            }
                                        }
                                        .level{
                                            flex:0.5;
                                            text-align:center;
                                        }
                                        .reward{
                                            flex:0.5;
                                            color:#FFC418;
                                            text-align:right;
                                        }
                                    }
                                    .thead{
                                        padding:10px 0;
                                        color:#666;
                                        span{
                                            &:first-child{
                                                color:#FFC518;
                                            }
                                        }
                                    }
                                }
                                &.nolist{
                                    position:relative;
                                    color:#B3B3B3;
                                    text-align:center;
                                    overflow: hidden;
                                    .no{
                                        width:100%;
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .yq-btn{
            height:50px;
            line-height:50px;
            text-align:center;
            color:#fff;
            font-size:21px;
            margin-top:10%;
            background:#FFD232;
            border-radius:24px;
            position: absolute;
            bottom: 3%;
            left: 27px;
            right: 27px;
            span{
                width: 100%;
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }
        }
        .ruler{
            width:49px;
            height:60px;
            position:absolute;
            right:15px;
            top:45px
            background:url(../../assets/ruler-bg.png) no-repeat 0 0;
            background-size:100% 100%;
            color:#333333;
            text-align: center;
            span{
                display block;
                width:100%;
                margin-top: 3px;
            }
        }
    }
    .rulerBox{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        z-index: 2;
        background:rgba(0,0,0,.3);
        .inner{
            position:absolute;
            top:50%;
            left:10%;
            width:80%;
            transform:translateY(-50%);
            background-color:#fff;
            border-radius:5px;
            padding:0 22px;
            .title{
                font-size:18px;
                font-weight:bold;
                color:#5F88FF;
                padding-bottom:15px;
                border-bottom:1px solid #F4F5FA;
                margin-top:20px;
                text-align:center;
            }
            .text{
                margin-top:20px;
                padding-bottom:25px;
                color:#999999;
                line-height:23px;
                border-bottom:1px solid #F4F5FA;
                li{
                    margin-top:5px;
                    &:last-child{
                        margin-top:10px;
                        font-size:12px;
                        text-align:center;
                    }
                }
            }
            .btn{
                margin: 0 auto;
                margin-top:25px;
                margin-bottom:30px;
                width: 120px;
                height: 40px;
                line-height: 40px;
                color:#fff;
                text-align:center;
                background:#5F88FF;
                border-radius:20px;
                position:relative;
                span{
                    width: 100%;
                    position:absolute;
                    top:50%;
                    left:50%;
                    transform:translate(-50%,-50%);
                    font-size: 16px;
                }
            }
        }
    }
    .loading{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:rgba(0,0,0,.5);
        span{
            position:absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%);
        }
    }
    .imgbox{
        width:100%;
        height:100%;
        background: rgba(0,0,0,.5);
        position:relative;
        &.show{
            position: fixed;
            top:0;
            z-index: 2;
        }
        .off{
            width:20px;
            height:20px;
            text-align:center;
            line-height:20px;
            color:#333;
            background:#fff;
            border-radius:50%;
            position:absolute;
            top:40px;
            right:8%;
            span{
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }
        }
        img{
            width:80%;
            margin-left:10%;
            margin-top:50px;
        }
        .btn{
            color:#fff;
            font-size:20px;
            text-align:center;
        }
    }
}  
</style>
